<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="home">
        <div class="header">这是固定的高度</div>
        <div class="main">这的内容高度要自适应不能固定高度，还有如果我的内容太多了超出了，就得自动显示滚动条，通过滚动加载我的内容</div>
    </div>


</body>
<script>

</script>

<style>
    .home {
        display: flex;
        flex-direction: column;
    }

    .header {
        width: 100%;
        height: 74px;
        background: #eee;
    }

    .main {
        flex: 1;
        overflow: auto;
        width: 0;
        height: 0;
    }
</style>

</html>